<template>
	<view class="preview-box w-100" :style="winHeight">
		<view class="preview-open w-100" :style="winHeight" @click="clickEvent">
			<movable-area scale-area>
				<movable-view scale="true" scale-min="1" scale-max="4" damping="30" direction="all">
					<image :src="imgUrl" mode="widthFix"></image>
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				windowHeight:''
			}
		},
		props:{
			imgUrl:{
				type:String,
				default:''
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight
				}
			});
			console.log('101010', this.imgUrl);
		},
		computed:{
			winHeight(){
				return `height: ${this.windowHeight}px;`
			}
		},
		methods:{
			clickEvent(){
				this.$emit('click-event')
			}
		}
	}
</script>

<style lang="scss">
	.preview-box{
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 1);
		.preview-open{
			position: absolute;
			movable-area{
				width: 100%;
				height: 100%;
				position: fixed;
				overflow: hidden;
			}
			movable-view{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			movable-view image{
				width: 100%;
			}
		}
		.preview-box-cover{
			position: relative;
			left: 0;
			top: 0;
			pointer-events:none;
			z-index: 9999;
			.store-img{
				width: 350rpx;
				height: 82rpx;
			}
		}
	}
</style>
